<template>
  <!-- <el-container direction="vertical">
        <el-header>
            头部公共组件
            <Header/>
        </el-header>
        <el-main>
            最好加个div
            <div>
                路由占位符
                <router-view></router-view>
            </div>
        </el-main>
        <el-footer>
            <div>
                <Footer/>
            </div>
        </el-footer>
    </el-container> -->

  <el-container>
    <!-- 组件粒子特效 -->
    <!-- <vue-particles
        color="#68aaf5"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="3"
        linesColor="#68aaf5"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      >
      </vue-particles> -->
    <div class="header">
      <Header />
    </div>
    <div class="main">
      <router-view></router-view>
      <el-backtop :bottom="150" :right="60">
        <i class="el-icon-caret-top"></i
      ></el-backtop>
    </div>
    <div class="footer">
      <Footer />
    </div>
  </el-container>
</template>

<script>

import Header from './viewComponets/Header'
import Footer from './viewComponets/Footer'
export default {
  components: {
    Header,
    Footer
  }

}
</script>
<style lang="less">
.el-container {
  padding: 0;
  margin: 0;
}
</style>
<style lang="less" scoped>
.el-container {
  position: relative;
  // background: linear-gradient(to bottom right,#9cd2f1, #bbfc8f);
  // background: linear-gradient(to bottom right,#f5f7f4, #68aaf5);

  .main {
    width: 1200px;
    margin: 3% auto;
    min-height: 750px;
    // margin: 0 10%;
    // margin-top: 65px;
    // background: rgba(255, 255, 255, 0.1);
    // border-radius: 5px;
    // border: 1px solid #eee;
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 2% 2%;
  }
  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  #particles-js {
    width: 100%;
    // height: inherit;
    // height: calc(100% - 100px);
    position: fixed; // 还有谁？nb不nb

    /* 设置absolute,其他DIV设置为relative，这样这个例子效果就作为背景 */
  }
}

// .el-container{

//     // background-color: #f8f9fa!important;
//     background: linear-gradient(to bottom right,#9cd2f1, #bbfc8f);

//     // min-height: 1800px;
//     .el-header{
//         // border:1px solid yellow;
//         width: 100%;
//         padding: 0 !important;
//         margin: 0 auto;
//         text-align: center;
//         position: relative;

//     }
//     .el-main{
//         // border:1px solid red;
//         // background-color: rgba(255, 255, 255, 0.8) !important;
//         box-sizing: border-box;
//         margin: 1% 10% !important;
//         padding:2% 1% !important;
//         box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
//         border-radius: 2%;
//         div{
//             height: 100%;
//             // min-height: 650px;
//         }

//     }
//     // 如果屏幕宽度小于800样式变化
//     @media screen and (max-width: 800px){
//         .el-main{
//             margin: 0 !important;
//             padding: 1% 3% !important;
//             border-radius: 0;
//             div{
//                 min-height: 580px;
//             }
//         }
//         .el-footer{
//             margin-top: 0.5%;
//         }
//     }
//     .el-footer{
//         // margin-top: 0.5%;
//         padding: 0 !important;
//     }

// }
</style>
